import { generateUUIDv4 } from '@/util/utils'
import { NodeSourceHandle } from '../../components/node-handle'
import '../index.less'

/**
 * 节点展示配置对象，用于控制节点信息的输出类型、选项以及意图匹配列表。
 *
 * @property {string} id - 连线ID，唯一标识该节点与其他节点之间的连接。
 * @property {Array<Object>} list - 数据列表，包含与节点相关的所有数据项。
 * @property {string} [title='选项'] - 节点标题，默认显示为“选项”。此属性可以用来指定一个自定义标题。
 * @property {string} [noneTitle='未配置内容'] - 当不存在特定参数时显示的文本，默认为“未配置内容”。
 * @property {Object} data - NodeSourceHandle数据，用于存储和传递节点源的相关信息。
 */
export default function WorkFlowNodeShowObj({ id, list, title = '选项', noneTitle = '未配置内容', data }) {
  return (
    <div className="flexCol">
      {list.map(item => {
        return (
          <div className="flexRowStart relative mb-[8px] w-[100%] " key={item.variable + generateUUIDv4()}>
            <span className="node_show_obj_title">{title}：</span>
            <span
              style={{ fontSize: '12px' }}
              className="domOverflowEllip nowrap field-empty--zX3qsp0AFV0f0UKtOyIn w-[calc(100%-60px)] flex-1 overflow-hidden truncate"
            >
              {item.variable || noneTitle}
            </span>
            <NodeSourceHandle
              id={item.id}
              data={data}
              handleId={item.id}
              handleClassName="!top-1/2 -right-[22px] !-translate-y-1/2"
            />
          </div>
        )
      })}
      <div className="flexRowStart relative mb-[8px] w-[100%]">
        <span className="node_show_obj_title">
          其他
          <span className="invisible">：</span>
        </span>
        <NodeSourceHandle
          id={id}
          data={data}
          handleId={'right_handle_' + id}
          handleClassName="!top-1/2 !-translate-y-1/2 -right-[22px]"
        />
      </div>
    </div>
  )
}
